<template>
  <div class="vaw-avatar-container">
    <el-dropdown trigger="hover" @command="onCommad">
      <div class="action-wrapper">
        <div class="avatar">
          <img :src="getAvatar" />
        </div>
        <span class="nick-name el-dropdown-link">
          <span>{{ getNickName || "admin" }}</span>
          <i class="el-icon-arrow-down tip"></i>
        </span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-user" command="personalCenter">
          个人中心
        </el-dropdown-item>
        <el-dropdown-item icon="el-icon-switch-button" command="logout">
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { MessageBox } from "element-ui";
import { UserStoreModule } from "@/store/modules/UserStore";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";

@Component({
  name: "LyVAWAvatar",
  components: {},
})
export default class LyVAWAvatar extends Vue {
  //#region vue prop =================================

  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================
  get getAvatar() {
    return UserStoreModule.getAvatar;
  }
  get getNickName() {
    return UserStoreModule.getNickName;
  }
  //#endregion
  //#region vue life =================================
  created() {
    console.log("LyVAWAvatar " + "created");
  }

  mounted() {
    console.log("LyVAWAvatar " + "mounted");
  }

  beforeDestroy() {
    console.log("LyVAWAvatar " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private onCommad(command: string) {
    switch (command) {
      case "personalCenter":
        this.onPersonalCenter();
        break;
      case "logout":
        this.onLogout();
        break;
    }
  }
  private onPersonalCenter() {
    LayoutStoreModule.toPersonalCenter();
  }
  private onLogout() {
    MessageBox.confirm("是否要退出登录？", "提示")
      .then((_) => {
        LayoutStoreModule.logout();
        // store.onLogout && store.onLogout()
      })
      .catch((err: Error) => {
        console.error(err);
      });
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";
.vaw-avatar-container {
  .action-wrapper {
    display: flex;
    align-items: center;
    .avatar {
      width: calc(#{$logoHeight} - 15px);
      height: calc(#{$logoHeight} - 15px);
      display: flex;
      align-items: center;
      & > img {
        border: 1px solid #f6f6f6;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .nick-name {
      margin-left: 10px;
      .tip {
        transform: rotate(0);
        transition: transform $transitionTime;
      }
    }
  }
}
.vaw-avatar-container:hover {
  cursor: pointer;
  .nick-name .tip {
    transform: rotate(180deg);
    transition: transform $transitionTime;
  }
}
.el-dropdown-menu {
  top: 40px !important;
}
</style>
